<template>
  <a-spin :loading="spinLoading" :size="35" class="w-[100%]" tip="正在处理, 请稍候...">
    <a-descriptions :column="2" bordered>
      <a-descriptions-item label="项目名称">
        {{ form.projectName }}
      </a-descriptions-item>
      <a-descriptions-item label="项目地址">
        {{ form.projectLocation }}
      </a-descriptions-item>
      <a-descriptions-item label="交易指标编号">
        {{ form.tradeCode }}
      </a-descriptions-item>
      <a-descriptions-item label="交易状态">
        <a-tag :color="getStatusColor(form.tradeStatus)">
          {{ getStatusText(form.tradeStatus) }}
        </a-tag>
      </a-descriptions-item>
      <a-descriptions-item label="申请购买面积-市储备库指标(亩)">
        {{ form.reserveArea }}
      </a-descriptions-item>
      <a-descriptions-item label="申请购买面积-省级公益林(亩)">
        {{ form.publicForestArea }}
      </a-descriptions-item>
      <a-descriptions-item :span="2" label="情况简介">
        <div class="whitespace-pre-wrap">{{ form.projectSituation || "暂无内容" }}</div>
      </a-descriptions-item>
      <a-descriptions-item v-if="form.redlineMapFile" :span="2" label="项目红线图">
        <a-image
            :preview-visible="false"
            :src="form.redlineMapFile.url"
            :width="200"
            @click="previewImage = true"
        />
        <a-image-preview-group
            v-model:visible="previewImage"
            :src-list="[form.redlineMapFile.url]"
        />
      </a-descriptions-item>
    </a-descriptions>

    <!-- 按钮区域 -->
    <div class="flex justify-center mt-6">
      <a-space>
        <a-button @click="onCancel">关闭</a-button>
      </a-space>
    </div>
  </a-spin>
</template>

<script setup>
import {getCurrentInstance, reactive, ref, watch} from "vue";
import {getTradeApplicationByTradeApplicationIdApi} from "~/api/lindi/tradeApplication.js";

// 定义props
const props = defineProps({
  params: {
    type: Object,
    default: () => ({}),
  },
});

// 定义emit
const emit = defineEmits(["ok", "cancel"]);

// 全局实例
const {proxy} = getCurrentInstance();

// 加载状态
const spinLoading = ref(false);
// 图片预览状态
const previewImage = ref(false);

// 表单数据
const form = reactive({
  tradeApplicationId: null,
  enterpriseAccountId: null,
  enterpriseAccount: null,
  projectName: "",
  projectLocation: "",
  tradeStatus: null,
  tradeCode: "",
  reserveArea: "",
  publicForestArea: "",
  projectSituation: "",
  redlineMapId: null,
  redlineMapFile: null,
});

// 监听参数变化
watch(
    () => props.params,
    () => {
      if (props.params.tradeApplicationId) {
        loadTradeApplicationInfo(props.params.tradeApplicationId);
      }
    },
    {deep: true, immediate: true}
);

// 加载交易申请信息
function loadTradeApplicationInfo(tradeApplicationId) {
  spinLoading.value = true;
  getTradeApplicationByTradeApplicationIdApi(tradeApplicationId)
      .then((res) => {
        if (res) {
          // 直接使用res而不是res.data
          Object.assign(form, res);
        } else {
          proxy.$message.error("获取交易申请详情失败");
        }
      })
      .catch((error) => {
        proxy.$message.error("加载交易申请信息失败: " + error.message);
      })
      .finally(() => {
        spinLoading.value = false;
      });
}

// 获取状态颜色
function getStatusColor(status) {
  const statusMap = {
    0: "orange",     // 待同意
    1: "gold",       // 待审批
    2: "red",        // 待启动
    3: "lime",       // 待上传发票
    4: "green",      // 待上传汇款凭证
    5: "cyan",       // 待上传确认函扫描件
    6: "blue",       // 待后续审批
    7: "arcoblue",   // 已完成后续审批，待调整图斑
    "-1": "purple",  // 已拒绝
    "-2": "pinkpurple", // 审批未通过
  };
  return statusMap[status] || "default";
}

// 获取状态文本
function getStatusText(status) {
  const statusMap = {
    0: "待同意",
    1: "待审批",
    2: "待启动",
    3: "待上传发票",
    4: "待上传汇款凭证",
    5: "待上传确认函扫描件",
    6: "待后续审批",
    7: "已完成后续审批，待调整图斑",
    "-1": "已拒绝",
    "-2": "审批未通过",
  };
  return statusMap[status] || "未知状态";
}

// 取消
function onCancel() {
  emit("cancel");
}
</script>

<style scoped>
.whitespace-pre-wrap {
  white-space: pre-wrap;
}
</style>
